<template>
  <view>
    <view class="pad30">
      <view class="flex-between mb20">
        <text>订单小结</text>
        <text class="color-info f12">共{{ formData.carVoList.length }}件商品</text>
      </view>
      <view class="flex-align mb30" v-for="(item, idx) in formData.carVoList" :key="idx">
        <image class="ml30 mr30" :src="item.imgUrl" mode="scaleToFill" style="width: 200rpx; height: 200rpx" />
        <view class="" style="width: 320rpx">
          <view class="line2">{{ item.clothName }}</view>
          <view class="f12 color-info mb50 mt10">{{ item.color }}色 {{ item.spec }}</view>
          <view class="flex-align flex-between">
            <text
              >￥<text class="f18">{{ item.price }}</text></text
            >
            {{ item.number }}
          </view>
        </view>
      </view>
      <u-line></u-line>
      <view class="mb20 pt20">
        <text class="pb20 pt20">收货信息</text>
        <view class="bor4 pad30 mt20" style="border: 1px solid" v-if="formData.userAddress">
          <view class="mb10">
            <text>{{ formData.userAddress.userName }}</text>
            <text class="ml10">{{ formData.userAddress.phone }}</text>
          </view>
          <view>
            {{ formData.userAddress.provinceName }}
            -
            {{ formData.userAddress.cityName }}
            -
            {{ formData.userAddress.areaName }}
            {{ formData.userAddress.address }}
          </view>
        </view>
        <view class="mt20" v-else>
          <u-button type="primary" text="选择地址" color="#675000" @click="chooseaddress"></u-button>
        </view>
      </view>
      <u-line></u-line>
      <view class="flex-between mt20">
        <text class="mr30">备注</text>
        <u-textarea v-model="formData.remark" placeholder="请输入内容" maxlength="100" count></u-textarea>
      </view>
    </view>
    <view class="btn-con flex-between pad30">
      <view class="flex-align">合计：{{ totalPrice }}元</view>
      <view class="btn flex-center ml30" @tap="submit">提交订单</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import homeApi from '@/api/homeApi'
import { onLoad } from '@dcloudio/uni-app'
import { reactive, ref } from 'vue'

const totalPrice = ref(0)
onLoad((e: any) => {
  formData.carVoList = uni.getStorageSync('goodsList')
  let num = formData.carVoList.reduce((a: any, b: any) => a + b.price * b.number, 0)
  totalPrice.value = num.toFixed(2)
})

const formData: any = reactive({
  carVoList: [],
  userAddress: null,
  remark: '',
  orderType: 0,
})

/* 选择微信系统 收货地址 */
const chooseaddress = () => {
  uni.chooseAddress({
    success(res) {
      formData.userAddress = {
        userName: res.userName,
        provinceName: res.provinceName,
        cityName: res.cityName,
        areaName: res.countyName,
        phone: res.telNumber,
        address: res.detailInfo,
      }
    },
  })
}
//
const submit = () => {
  if (formData.userAddress.userName === '') {
    uni.showToast({
      title: '请选择收货地址',
      icon: 'none',
    })
    return
  }
  let data = JSON.parse(JSON.stringify(formData))
  homeApi.checkoutCar(data).then((res: any) => {
    if (res.success) {
      uni.showToast({
        title: '提交成功',
        icon: 'none',
      })
      uni.navigateTo({
        url: '/my/orderList',
      })
    }
  })
}
</script>

<style lang="scss" scoped>
.btn-con {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
  .btn {
    width: 60%;
    height: 80rpx;
    background-color: $uni-color-primary;
    color: #fff;
    border-radius: 30px;
  }
}
</style>
